<template>
  <div class="page pb-60">
    <!-- 顶部栏 -->
    <Base-Navbar title="收货地址" left-arrow></Base-Navbar>

    <div class="container">
      <ul class="list fz-13">
        <li
          class="item box opacity"
          :class="isSelectMode ? 'click' : ''"
          v-for="(v, i) in addresses"
          :key="i"
          @click="selectAddress(v)"
        >
          <div class="flex flex-rb">
            <div>
              <span>收货人：</span>
              <span>{{ v.receiver }}</span>
              <van-tag class="ml-5" type="danger" v-if="v.isdefault"
                >默认</van-tag
              >
            </div>

            <div class="flex" v-if="!isSelectMode">
              <div
                class="cl-success click mr-10"
                @click.stop="showEditModal(v)"
              >
                编辑
              </div>
              <div class="cl-error click" @click="showDelConfirm(v)">删除</div>
            </div>
          </div>

          <div>
            <span>电话：</span>
            <span>{{ v.mobile }}</span>
          </div>

          <div>
            <span>地址：</span>
            <span>{{ v.address }}</span>
          </div>
        </li>
      </ul>
    </div>

    <div class="footer pl-30 pr-30">
      <van-button type="primary" block @click="showEditModal(null)">
        新增收货地址
      </van-button>
    </div>

    <!-- 新增、编辑 -->
    <van-popup v-model:show="visible">
      <div style="width: 320px">
        <div class="title ta-center mb-20">
          {{ modal.id ? '编辑' : '新增' }}收货地址
        </div>

        <van-form @submit="postAddress">
          <van-field
            name="receiver"
            label="收货人"
            placeholder=""
            :rules="[{ required: true, message: '请填写收货人' }]"
            v-model="modal.receiver"
          ></van-field>

          <van-field
            name="mobile"
            label="电话"
            placeholder=""
            :rules="[{ required: true, message: '请填写电话' }]"
            v-model="modal.mobile"
          ></van-field>

          <van-field
            name="address"
            label="收货地址"
            placeholder=""
            :rules="[{ required: true, message: '请填写收货地址' }]"
            v-model="modal.address"
          ></van-field>

          <van-field name="isdefault" label="设为默认地址">
            <template #input>
              <van-switch
                :inactive-value="0"
                :active-value="1"
                v-model="modal.isdefault"
              ></van-switch>
            </template>
          </van-field>

          <div class="mt-20">
            <van-button type="primary" round block native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showConfirmDialog } from 'vant'
import 'vant/es/dialog/style'
import api from 'js/api'

const router = useRouter()
const route = useRoute()
const isSelectMode = route.query.mode === 'select'

const addresses = ref([])

const modal = ref({
  receiver: '',
  mobile: '',
  address: '',
  isdefault: 0,
})
const visible = ref(false)

getAddressList()

// 获取收货地址列表
async function getAddressList() {
  const { code, data } = await api.getAddressList()

  if (code === 1) {
    addresses.value = data
  }
}

// 新增、编辑收货地址
async function postAddress() {
  const params = {
    ...modal.value,
  }

  const { code } = await api.postAddress(params)

  if (code === 1) {
    visible.value = false
    getAddressList()
  }
}

// 删除收货地址
async function delAddress(v) {
  const params = {
    id: v.id,
  }

  const { code } = await api.delAddress(params)

  if (code === 1) {
    visible.value = false
    getAddressList()
  }
}

// 选择收货地址
function selectAddress(v) {
  localStorage.setItem('selectedAddress', JSON.stringify(v))
  router.back()
}

// 显示编辑
function showEditModal(v) {
  modal.value = {
    ...v,
  }

  visible.value = true
}

// 显示删除
function showDelConfirm(v) {
  showConfirmDialog({
    title: '消息提示',
    message: '确认需要删除该地址？',
  }).then(() => {
    delAddress(v)
  })
}
</script>

<style lang="scss" scoped>
:deep(.van-form) {
  .van-cell {
    background-color: transparent;

    &__title {
      color: white;
    }

    input {
      color: white;
    }
  }
}
</style>
